<template>
  <div class="projects-page">
    <!-- 顶部导航栏 -->
    <header class="page-header">
      <div class="header-content">
        <div class="logo" @click="goHome">
          <!-- <i class="fas fa-project-diagram"></i> -->
          <!-- <h1>我的项目集</h1> -->
        </div>
        <div class="user-actions">
          <button class="btn-icon" @click="navigateToProfile">
            <i class="fas fa-user"></i>
          </button>
          <button class="btn-icon" @click="goBack">
            <i class="fas fa-arrow-left"></i>
          </button>
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="main-content">
      <!-- 控制面板 -->
      <section class="control-panel">
        <div class="search-box">
          <i class="fas fa-search"></i>
          <input 
            type="text" 
            v-model="searchQuery"
            placeholder="搜索项目..."
            @input="handleSearch"
          >
          <button 
            class="clear-btn" 
            v-if="searchQuery"
            @click="clearSearch"
          >
            <i class="fas fa-times"></i>
          </button>
        </div>

        <div class="filters">
          <div class="filter-group">
            <label>排序方式:</label>
            <select v-model="sortOption" @change="applyFilters">
              <option value="recent">最近参与</option>
              <option value="contribution">贡献程度</option>
              <option value="alphabetical">项目名称</option>
              <option value="completion">完成进度</option>
            </select>
          </div>

          <div class="filter-group">
            <label>项目状态:</label>
            <div class="status-filters">
              <button
                v-for="status in statusOptions"
                :key="status.value"
                :class="{ active: activeStatus === status.value }"
                @click="toggleStatus(status.value)"
              >
                <i :class="status.icon"></i>
                <span>{{ status.label }}</span>
              </button>
            </div>
          </div>
        </div>
      </section>

      <!-- 统计卡片 -->
      <section class="stats-cards">
        <div 
          class="stat-card"
          v-for="stat in stats"
          :key="stat.label"
          :class="{ highlight: stat.highlight }"
        >
          <div class="stat-icon">
            <i :class="stat.icon"></i>
          </div>
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </section>

      <!-- 项目网格 -->
      <section class="projects-grid">
        <transition-group name="project-list">
          <div
            class="project-card"
            v-for="project in filteredProjects"
            :key="project.id"
            @click="openProjectModal(project)"
          >
            <div class="card-header">
              <span class="category">{{ project.category }}</span>
              <button 
                class="favorite-btn"
                @click.stop="toggleFavorite(project)"
              >
                <i :class="['fas', project.isFavorite ? 'fa-heart' : 'fa-heart-o']"></i>
              </button>
            </div>

            <div class="card-image">
              <img 
                :src="project.image" 
                :alt="project.name"
                @error="handleImageError"
              >
              <div class="progress-bar">
                <div 
                  class="progress-fill"
                  :style="{ width: project.progress + '%' }"
                  :class="getProgressClass(project.progress)"
                ></div>
              </div>
            </div>

            <div class="card-body">
              <h3 class="project-title">{{ project.name }}</h3>
              <p class="project-desc">{{ truncateDescription(project.description) }}</p>
              
              <div class="project-meta">
                <div class="meta-item">
                  <i class="fas fa-coins"></i>
                  <span>{{ project.myContribution }} ETH</span>
                </div>
                <div class="meta-item">
                  <i class="far fa-calendar-alt"></i>
                  <span>{{ formatDate(project.participationDate) }}</span>
                </div>
              </div>
            </div>

            <div class="card-footer">
              <div class="skills">
                <span 
                  v-for="(skill, index) in project.skillsUsed.slice(0, 3)"
                  :key="index"
                  class="skill-tag"
                  :style="{ backgroundColor: getSkillColor(skill) }"
                >
                  {{ skill }}
                </span>
                <span 
                  class="more-skills"
                  v-if="project.skillsUsed.length > 3"
                >
                  +{{ project.skillsUsed.length - 3 }}
                </span>
              </div>
              <div class="action-btns">
                <button class="btn view-btn">查看详情</button>
                <button 
                  class="btn contribute-btn"
                  v-if="project.status === 'active'"
                  @click.stop="contributeToProject(project)"
                >
                  贡献ETH
                </button>
              </div>
            </div>
          </div>
        </transition-group>
      </section>

      <!-- 空状态 -->
      <div class="empty-state" v-if="filteredProjects.length === 0">
        <div class="empty-icon">
          <i class="fas fa-folder-open"></i>
        </div>
        <h3>没有找到匹配的项目</h3>
        <p>尝试调整您的搜索条件或筛选器</p>
        <button class="btn reset-btn" @click="resetFilters">重置所有筛选</button>
      </div>
    </main>

    <!-- 项目详情模态框 -->
    <transition name="modal">
      <div 
        class="project-modal"
        v-if="selectedProject"
        @click.self="closeModal"
      >
        <div class="modal-content">
          <button class="close-btn" @click="closeModal">
            <i class="fas fa-times"></i>
          </button>

          <div class="modal-header">
            <h2>{{ selectedProject.name }}</h2>
            <div class="modal-subheader">
              <span class="status-badge" :class="selectedProject.status">
                {{ getStatusLabel(selectedProject.status) }}
              </span>
              <span class="project-dates">
                <i class="far fa-calendar-alt"></i>
                {{ formatDate(selectedProject.startDate) }} - 
                {{ selectedProject.status === 'completed' ? formatDate(selectedProject.endDate) : '至今' }}
              </span>
            </div>
          </div>

          <div class="modal-body">
            <div class="modal-columns">
              <div class="main-content">
                <div class="project-image">
                  <img :src="selectedProject.image" :alt="selectedProject.name">
                </div>

                <div class="section">
                  <h3>项目描述</h3>
                  <p>{{ selectedProject.longDescription }}</p>
                </div>

                <div class="section">
                  <h3>我的贡献与影响</h3>
                  <p>{{ selectedProject.myImpact }}</p>
                </div>

                <div class="section">
                  <h3>项目里程碑</h3>
                  <div class="timeline">
                    <div 
                      v-for="(milestone, index) in selectedProject.milestones"
                      :key="index"
                      class="timeline-item"
                      :class="{ completed: milestone.completed }"
                    >
                      <div class="timeline-marker">
                        <i :class="['fas', milestone.completed ? 'fa-check-circle' : 'fa-circle']"></i>
                      </div>
                      <div class="timeline-content">
                        <h4>{{ milestone.title }}</h4>
                        <span class="timeline-date">{{ formatDate(milestone.date) }}</span>
                        <p>{{ milestone.description }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="sidebar">
                <div class="info-card">
                  <h4>项目概览</h4>
                  <div class="info-item">
                    <label>类别:</label>
                    <span>{{ selectedProject.category }}</span>
                  </div>
                  <div class="info-item">
                    <label>我的角色:</label>
                    <span>{{ selectedProject.role }}</span>
                  </div>
                  <div class="info-item">
                    <label>参与时间:</label>
                    <span>{{ formatDate(selectedProject.participationDate) }}</span>
                  </div>
                  <div class="info-item">
                    <label>贡献金额:</label>
                    <span>{{ selectedProject.myContribution }} ETH</span>
                  </div>
                  <div class="info-item">
                    <label>使用技能:</label>
                    <div class="skill-tags">
                      <span 
                        v-for="(skill, index) in selectedProject.skillsUsed"
                        :key="index"
                        class="skill-tag"
                        :style="{ backgroundColor: getSkillColor(skill) }"
                      >
                        {{ skill }}
                      </span>
                    </div>
                  </div>
                </div>

                <div class="team-card">
                  <h4>团队成员</h4>
                  <div class="team-members">
                    <div 
                      v-for="member in selectedProject.teamMembers"
                      :key="member.id"
                      class="team-member"
                    >
                      <img :src="member.avatar" :alt="member.name" class="member-avatar">
                      <div class="member-info">
                        <span class="member-name">{{ member.name }}</span>
                        <span class="member-role">{{ member.role }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="progress-card">
                  <h4>项目进度</h4>
                  <div class="progress-container">
                    <div class="progress-labels">
                      <span>完成度</span>
                      <span>{{ selectedProject.progress }}%</span>
                    </div>
                    <div class="progress-bar">
                      <div 
                        class="progress-fill"
                        :style="{ width: selectedProject.progress + '%' }"
                        :class="getProgressClass(selectedProject.progress)"
                      ></div>
                    </div>
                  </div>
                  <button 
                    class="btn contribute-btn"
                    @click="contributeToProject(selectedProject)"
                    v-if="selectedProject.status === 'active'"
                  >
                    <i class="fas fa-plus"></i> 继续贡献
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { debounce } from 'lodash-es'

const router = useRouter()

// 状态管理
const searchQuery = ref('')
const sortOption = ref('recent')
const activeStatus = ref('all')
const selectedProject = ref(null)

// 项目数据
const projects = ref([
  {
    id: 1,
    name: '区块链教育平台',
    description: '开发基于区块链的教育认证系统，确保学历真实性',
    longDescription: '作为前端开发负责人，我带领团队构建了一个基于区块链的教育认证平台，允许学校安全地颁发数字证书。该系统使用以太坊智能合约存储证书哈希，确保学历真实性和不可篡改性。我负责整个前端架构设计和主要功能实现。',
    image: 'https://via.placeholder.com/600x400?text=Education+Blockchain',
    category: '教育',
    status: 'completed',
    progress: 100,
    startDate: '2023-01-15',
    endDate: '2023-06-30',
    participationDate: '2023-01-20',
    myContribution: 5.2,
    role: '前端负责人',
    skillsUsed: ['Vue.js', 'Web3.js', 'Solidity', 'UI设计'],
    teamMembers: [
      { id: 1, name: '张伟', role: '后端开发', avatar: 'https://via.placeholder.com/40' },
      { id: 2, name: '李娜', role: '产品经理', avatar: 'https://via.placeholder.com/40' },
      { id: 3, name: '王强', role: '区块链开发', avatar: 'https://via.placeholder.com/40' }
    ],
    milestones: [
      { title: '需求分析完成', date: '2023-02-10', description: '完成所有用户需求收集和分析', completed: true },
      { title: '原型设计确认', date: '2023-03-05', description: 'UI/UX设计获得客户批准', completed: true },
      { title: '智能合约部署', date: '2023-04-20', description: '完成证书颁发和验证智能合约', completed: true },
      { title: '前端开发完成', date: '2023-05-15', description: '完成所有前端页面和功能', completed: true },
      { title: '测试验收通过', date: '2023-06-20', description: '完成系统测试和用户验收', completed: true }
    ],
    myImpact: '我的工作使平台用户界面响应速度提升了40%，并实现了无缝的区块链交互体验。系统目前已被10所学校采用，颁发了超过5000份数字证书。',
    isFavorite: true
  },
  {
    id: 2,
    name: '去中心化医疗记录系统',
    description: '开发保护患者隐私的分布式医疗记录管理系统',
    longDescription: '作为全栈开发工程师，我参与构建了一个基于IPFS和以太坊的医疗记录系统。患者可以完全控制自己的医疗数据，并选择性地授权给医疗机构访问。我主要负责智能合约开发和前端与区块链的集成工作。',
    image: 'https://via.placeholder.com/600x400?text=Medical+Records',
    category: '医疗',
    status: 'active',
    progress: 75,
    startDate: '2023-03-10',
    endDate: '2023-12-15',
    participationDate: '2023-03-15',
    myContribution: 3.8,
    role: '全栈开发',
    skillsUsed: ['React', 'Solidity', 'IPFS', 'Node.js'],
    teamMembers: [
      { id: 1, name: '陈医生', role: '医疗顾问', avatar: 'https://via.placeholder.com/40' },
      { id: 2, name: '赵敏', role: '项目经理', avatar: 'https://via.placeholder.com/40' },
      { id: 3, name: '刘涛', role: '后端开发', avatar: 'https://via.placeholder.com/40' }
    ],
    milestones: [
      { title: '系统架构设计', date: '2023-04-01', description: '确定技术栈和系统架构', completed: true },
      { title: '数据模型完成', date: '2023-05-15', description: '完成医疗数据标准化模型', completed: true },
      { title: '核心合约部署', date: '2023-06-30', description: '部署权限管理智能合约', completed: true },
      { title: '患者端开发', date: '2023-08-15', description: '完成患者门户开发', completed: true },
      { title: '医生端开发', date: '2023-09-30', description: '预计完成医生门户开发', completed: false },
      { title: '系统测试', date: '2023-11-15', description: '全面系统测试阶段', completed: false }
    ],
    myImpact: '我设计的权限管理模块使患者可以精确控制数据访问权限，同时保证了医疗数据的完整性和可追溯性。目前系统已在3家诊所进行试点。',
    isFavorite: true
  },
  {
    id: 3,
    name: '碳中和区块链追踪',
    description: '为企业提供碳排放追踪和碳中和验证平台',
    longDescription: '作为区块链开发工程师，我开发了一套基于Hyperledger Fabric的碳排放追踪系统。企业可以实时记录和验证碳排放数据，购买碳信用额度，并通过智能合约自动完成碳中和验证。我负责设计并实现了核心的碳信用交易逻辑。',
    image: 'https://via.placeholder.com/600x400?text=Carbon+Tracking',
    category: '环保',
    status: 'active',
    progress: 60,
    startDate: '2023-05-01',
    endDate: '2023-11-30',
    participationDate: '2023-05-10',
    myContribution: 2.5,
    role: '区块链开发',
    skillsUsed: ['Hyperledger', 'Go', 'Docker', 'Kubernetes'],
    teamMembers: [
      { id: 1, name: '环保李', role: '领域专家', avatar: 'https://via.placeholder.com/40' },
      { id: 2, name: '吴总', role: '产品负责人', avatar: 'https://via.placeholder.com/40' },
      { id: 3, name: '郑工', role: '系统架构师', avatar: 'https://via.placeholder.com/40' }
    ],
    milestones: [
      { title: '需求确认', date: '2023-05-20', description: '完成企业需求收集', completed: true },
      { title: '网络搭建', date: '2023-06-15', description: '建立Hyperledger网络', completed: true },
      { title: '数据模型', date: '2023-07-10', description: '设计碳排放数据模型', completed: true },
      { title: '交易逻辑', date: '2023-08-30', description: '实现碳信用交易链码', completed: false },
      { title: '企业集成', date: '2023-09-30', description: '与企业ERP系统集成', completed: false },
      { title: '试点运行', date: '2023-10-15', description: '在试点企业上线', completed: false }
    ],
    myImpact: '我设计的碳信用交易机制确保了透明性和不可篡改性，已有5家企业承诺加入我们的试点计划。',
    isFavorite: false
  }
])

// 配置选项
const statusOptions = [
  { value: 'all', label: '全部', icon: 'fas fa-list' },
  { value: 'active', label: '进行中', icon: 'fas fa-sync-alt' },
  { value: 'completed', label: '已完成', icon: 'fas fa-check-circle' },
  { value: 'paused', label: '已暂停', icon: 'fas fa-pause-circle' }
]

// 计算属性
const stats = computed(() => [
  { 
    value: projects.value.length,
    label: '参与项目总数',
    icon: 'fas fa-project-diagram',
    highlight: false
  },
  { 
    value: projects.value.filter(p => p.status === 'completed').length,
    label: '已完成项目',
    icon: 'fas fa-check',
    highlight: false
  },
  { 
    value: projects.value.filter(p => p.status === 'active').length,
    label: '进行中项目',
    icon: 'fas fa-spinner',
    highlight: false
  },
  { 
    value: projects.value.reduce((sum, p) => sum + p.myContribution, 0).toFixed(1) + ' ETH',
    label: '总贡献金额',
    icon: 'fas fa-coins',
    highlight: true
  }
])

const filteredProjects = computed(() => {
  let result = [...projects.value]
  
  // 应用搜索
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(p => 
      p.name.toLowerCase().includes(query) || 
      p.description.toLowerCase().includes(query) ||
      p.category.toLowerCase().includes(query) ||
      p.skillsUsed.some(skill => skill.toLowerCase().includes(query)))
  }
  
  // 应用状态筛选
  if (activeStatus.value !== 'all') {
    result = result.filter(p => p.status === activeStatus.value)
  }
  
  // 应用排序
  switch(sortOption.value) {
    case 'recent':
      result.sort((a, b) => new Date(b.participationDate) - new Date(a.participationDate))
      break
    case 'contribution':
      result.sort((a, b) => b.myContribution - a.myContribution)
      break
    case 'alphabetical':
      result.sort((a, b) => a.name.localeCompare(b.name))
      break
    case 'completion':
      result.sort((a, b) => b.progress - a.progress)
      break
  }
  
  return result
})

// 方法
const goHome = () => router.push('/')
const navigateToProfile = () => router.push('/profile')
const goBack = () => router.go(-1)

const handleSearch = debounce(() => {
  // 搜索逻辑已由计算属性处理
}, 300)

const clearSearch = () => {
  searchQuery.value = ''
}

const toggleStatus = (status) => {
  activeStatus.value = status
}

const applyFilters = () => {
  // 排序和筛选已由计算属性自动处理
}

const resetFilters = () => {
  searchQuery.value = ''
  sortOption.value = 'recent'
  activeStatus.value = 'all'
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}

const truncateDescription = (desc) => {
  return desc.length > 100 ? desc.substring(0, 100) + '...' : desc
}

const getProgressClass = (progress) => {
  if (progress >= 90) return 'excellent'
  if (progress >= 70) return 'good'
  if (progress >= 40) return 'average'
  return 'low'
}

const getStatusLabel = (status) => {
  const map = { active: '进行中', completed: '已完成', paused: '已暂停' }
  return map[status] || status
}

const getSkillColor = (skill) => {
  const colors = [
    'rgba(108, 92, 231, 0.15)', 
    'rgba(0, 184, 148, 0.15)', 
    'rgba(253, 121, 168, 0.15)', 
    'rgba(253, 203, 110, 0.15)',
    'rgba(129, 236, 236, 0.15)',
    'rgba(225, 112, 85, 0.15)'
  ]
  return colors[skill.length % colors.length]
}

const openProjectModal = (project) => {
  selectedProject.value = project
}

const closeModal = () => {
  selectedProject.value = null
}

const toggleFavorite = (project) => {
  project.isFavorite = !project.isFavorite
  localStorage.setItem(`project_${project.id}_favorite`, project.isFavorite)
}

const contributeToProject = (project) => {
  const amount = prompt(`您想为项目"${project.name}"贡献多少ETH?`, '0.1')
  if (amount && !isNaN(amount)) {
    project.myContribution += parseFloat(amount)
    alert(`成功贡献 ${amount} ETH 到项目 ${project.name}`)
  }
}

const handleImageError = (e) => {
  e.target.src = 'https://via.placeholder.com/600x400?text=Image+Not+Found'
}

// 初始化
onMounted(() => {
  projects.value.forEach(project => {
    const isFavorite = localStorage.getItem(`project_${project.id}_favorite`)
    if (isFavorite !== null) {
      project.isFavorite = isFavorite === 'true'
    }
  })
})
</script>

<style scoped>
/* 基础样式 */
:root {
  --primary-color: #6c5ce7;
  --secondary-color: #00b894;
  --text-color: #2d3436;
  --light-text: #636e72;
  --border-color: #dfe6e9;
  --bg-color: #f8f9fa;
  --card-bg: #ffffff;
}

.projects-page {
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: var(--bg-color);
  min-height: 100vh;
  color: var(--text-color);
}

/* 头部样式 */
.page-header {
  background-color: var(--card-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1rem 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.logo i {
  font-size: 1.5rem;
  color: var(--primary-color);
}

.logo h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.user-actions {
  display: flex;
  gap: 0.75rem;
}

.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--light-text);
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background-color: #f1f3f5;
  color: var(--primary-color);
}

/* 主要内容区 */
.main-content {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 2rem;
}

/* 控制面板 */
.control-panel {
  margin-bottom: 2rem;
}

.search-box {
  position: relative;
  max-width: 500px;
  margin-bottom: 1.5rem;
}

.search-box i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--light-text);
}

.search-box input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.search-box input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);
}

.clear-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--light-text);
  cursor: pointer;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.filter-group label {
  font-weight: 500;
  white-space: nowrap;
}

.filter-group select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background-color: var(--card-bg);
  cursor: pointer;
}

.status-filters {
  display: flex;
  gap: 0.5rem;
}

.status-filters button {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background-color: var(--card-bg);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.status-filters button:hover {
  background-color: #f1f3f5;
}

.status-filters button.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background-color: var(--card-bg);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  text-align: center;
}

.stat-card.highlight {
  background-color: var(--primary-color);
  color: white;
}

.stat-card.highlight .stat-label {
  color: rgba(255, 255, 255, 0.9);
}

.stat-icon {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.stat-card.highlight .stat-icon {
  opacity: 0.4;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--light-text);
}

/* 项目网格 */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.project-card {
  background-color: var(--card-bg);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.status-active {
  border-left: 4px solid #00b894;
}

.status-completed {
  border-left: 4px solid var(--primary-color);
}

.status-paused {
  border-left: 4px solid #fdcb6e;
}

.card-header {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category {
  font-size: 0.75rem;
  color: var(--light-text);
  background-color: #f1f3f5;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
}

.favorite-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ff7675;
  transition: all 0.2s ease;
}

.favorite-btn:hover {
  background-color: rgba(255, 118, 117, 0.1);
}

.card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-card:hover .card-image img {
  transform: scale(1.05);
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.1);
}

.progress-fill {
  height: 100%;
}

.progress-fill.excellent {
  background-color: #00b894;
}

.progress-fill.good {
  background-color: #00cec9;
}

.progress-fill.average {
  background-color: #fdcb6e;
}

.progress-fill.low {
  background-color: #ff7675;
}

.card-body {
  padding: 1rem;
  flex: 1;
}

.project-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-desc {
  font-size: 0.875rem;
  color: var(--light-text);
  margin: 0 0 1rem;
  line-height: 1.5;
  display: -webkit-box;
  /* -webkit-line-clamp: 3; */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.meta-item:first-child {
  color: var(--primary-color);
  font-weight: 500;
}

.card-footer {
  padding: 0 1rem 1rem;
}

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.skill-tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
}

.more-skills {
  font-size: 0.75rem;
  color: var(--light-text);
  align-self: center;
}

.action-btns {
  display: flex;
  gap: 0.75rem;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.view-btn {
  background-color: var(--primary-color);
  color: white;
}

.view-btn:hover {
  background-color: #5649c0;
}

.contribute-btn {
  background-color: var(--secondary-color);
  color: white;
}

.contribute-btn:hover {
  background-color: #00a884;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 3rem 0;
}

.empty-icon {
  font-size: 3rem;
  color: #e9ecef;
  margin-bottom: 1rem;
}

.empty-state h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: var(--light-text);
  margin-bottom: 1.5rem;
}

.reset-btn {
  background-color: var(--primary-color);
  color: white;
  padding: 0.75rem 1.5rem;
}

.reset-btn:hover {
  background-color: #5649c0;
}

/* 模态框 */
.project-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-content {
  background-color: var(--card-bg);
  border-radius: 0.75rem;
  max-width: 1000px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.close-btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.modal-subheader {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: 0.75rem;
}

.status-badge.active {
  background-color: rgba(0, 184, 148, 0.1);
  color: #00b894;
}

.status-badge.completed {
  background-color: rgba(108, 92, 231, 0.1);
  color: var(--primary-color);
}

.status-badge.paused {
  background-color: rgba(253, 203, 110, 0.1);
  color: #fdcb6e;
}

.modal-body {
  padding: 1.5rem;
}

.modal-columns {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.project-image {
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #f1f3f5;
  aspect-ratio: 16/9;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section {
  margin-bottom: 1.5rem;
}

.section h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.section p {
  line-height: 1.6;
  color: var(--text-color);
}

.timeline {
  position: relative;
  padding-left: 1.5rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--border-color);
}

.timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -1.5rem;
  top: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  background-color: var(--card-bg);
}

.timeline-item.completed .timeline-marker {
  color: #00b894;
}

.timeline-content h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.timeline-date {
  font-size: 0.75rem;
  color: var(--light-text);
  display: block;
  margin-bottom: 0.5rem;
}

.timeline-content p {
  font-size: 0.875rem;
  margin: 0;
  color: var(--light-text);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-card, .team-card, .progress-card {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  padding: 1rem;
}

.info-card h4, .team-card h4, .progress-card h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

.info-item {
  margin-bottom: 0.75rem;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item label {
  display: block;
  font-size: 0.75rem;
  color: var(--light-text);
  margin-bottom: 0.25rem;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.team-members {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.team-member {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.member-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.member-name {
  font-weight: 500;
  font-size: 0.875rem;
}

.member-role {
  font-size: 0.75rem;
  color: var(--light-text);
}

.progress-container {
  margin-bottom: 1rem;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* 过渡动画 */
.project-list-move,
.project-list-enter-active,
.project-list-leave-active {
  transition: all 0.5s ease;
}

.project-list-enter-from,
.project-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.project-list-leave-active {
  position: absolute;
}

.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-active .modal-content,
.modal-leave-active .modal-content {
  transition: transform 0.3s ease;
}

.modal-enter-from .modal-content,
.modal-leave-to .modal-content {
  transform: translateY(-20px);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .modal-columns {
    grid-template-columns: 1fr;
  }
  
  .header-content {
    padding: 0 1rem;
  }
  
  .main-content {
    padding: 0 1rem;
  }
  
  .filters {
    flex-direction: column;
    gap: 1rem;
  }
  
  .filter-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .status-filters {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
  
  .action-btns {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
}
</style>